<template>
    <div class="edit-config-modal relative" ref="editAddModal">
        <a-modal 
            v-model:open="state.isShow" 
            width="700px" wrapClassName="custom-modal"
            :bodyStyle="{ height: '300px', overflowY: 'overlay', overflowX: 'hidden', paddingRight: '6px' }"
            :title="state.formState.id != undefined && state.formState.id > 0 ? '编辑配置' : '添加配置'" 
            ancelText="取消"
            okText="确定" 
            :getContainer="() => $refs.editAddModal" 
            @ok="handleOk" 
            @cancel="handleCancel"
        >
            <a-form ref="formRef" :model="state.formState" name="role-edit-form" autocomplete="off"
                :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                <a-spin :spinning="state.loading">
                    <a-row>
                        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <a-form-item label="配置名称" name="name" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }"
                                :rules="[{ required: true, message: '配置名称不能为空', trigger: 'blur' }]">
                                <a-input v-model:value="state.formState.name" />
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <a-form-item label="配置编码" name="code" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }"
                                :rules="[{ required: true, message: '配置编码不能为空', trigger: 'blur' }]">
                                <a-input v-model:value="state.formState.code"
                                    :disabled="state.formState.sysFlag == 1" />
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <a-form-item label="值" name="value" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }"
                                :rules="[{ required: true, message: '值不能为空', trigger: 'blur' }]">
                                <a-input v-model:value="state.formState.value">
                                    <template #addonAfter>
                                        <a-dropdown>
                                            <template #overlay>
                                                <a-menu @click="(v:any)=>state.formState.value = v.key">
                                                    <a-menu-item key="True">
                                                        True
                                                    </a-menu-item>
                                                    <a-menu-item key="False">
                                                        False
                                                    </a-menu-item>
                                                </a-menu>
                                            </template>
                                            <a-button>
                                                选项
                                            </a-button>
                                        </a-dropdown>
                                    </template>
                                </a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <a-form-item label="内置参数" name="sysFlag" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }"
                                :rules="[{ required: true, message: '内置参数不能为空', trigger: 'blur' }]">
                                <a-radio-group v-model:value="state.formState.sysFlag" :disabled="userInfoStore.state.userInfos.account != 'superadmin'">
                                    <a-radio :value="1">是</a-radio>
                                    <a-radio :value="2">否</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item label="分组编码" name="groupCode" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                <a-input v-model:value="state.formState.groupCode" :disabled="state.formState.sysFlag == 1" />
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <a-form-item label="排序" name="orderNo" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                <a-input-number class="w-full" v-model:value="state.formState.orderNo" placeholder="排序"/>
                            </a-form-item>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <a-form-item
                                label="备注"
                                name="remark"
                                :label-col="{ span: 3 }"
                                :wrapper-col="{ span: 21 }"
                            >
                                <a-textarea :rows="2" v-model:value="state.formState.remark"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-spin>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { ItemType } from '../types';
import type { FormInstance } from 'ant-design-vue';
import { apiSysConfigAddPost, apiSysConfigUpdatePost } from '@/api/sys/sysConfig';
import { showMsg } from '@/utils';
import { useUserInfo } from '@/stores/userInfo';


const emits = defineEmits<{
    (e: 'handleQuery'): void
}>();

const userInfoStore = useUserInfo()
const formRef = ref<FormInstance>()
const state = reactive({
    isShow: false,
    formState: {} as ItemType,
    loading: false
})
const handleOk = async() => {
    await formRef.value?.validate()
    if(state.formState.id != undefined && state.formState.id >0){
        await apiSysConfigUpdatePost(state.formState)
    }else{
        await apiSysConfigAddPost(state.formState)
    }
    showMsg("操作成功",'success')
    handleCancel()
    emits('handleQuery')
}
const handleCancel = () => {
    state.isShow = false
}

const handleOpen = (row: ItemType) => {
    state.isShow = true
    state.formState = JSON.parse(JSON.stringify(row))
}

defineExpose({
    handleOpen,
})
</script>

<style lang="scss" scoped>
:deep(.ant-form-item) {
    margin-bottom: 20px;
}

:deep(.anticon.anticon-caret-down) {
    display: inline-flex;
}

:deep(.ant-tree-checkbox) {
    margin-block-start: 0;
}

:deep(.ant-input-group-addon){
    padding:0;
}
</style>